Home

Informatik 7

Positionierung von Boxelementen

Wir haben bereits die Möglichkeit kennengelernt, Blockelemente mit Hilfe der Außenabstände zu positionieren (margin). Der Nachteil dieser Methode ist, dass dabei immer auch die Position benachbarter Elemente beeinflusst wird. Insbesondere ist es aufwändig, Elemente nebeneinander zu platzieren.
In diesem Fall ist es günstiger, Elemente absolut zu positionieren.

Absolute Positionierung

position:absolute

Dabei wird das Element vollständig aus dem Fluss des Dokuments herausgenommen ( d.h. es beeinflusst keine anderen Elemente) und am umgebenden Block ausgerichtet. Bezugspunkt ist dabei die linke obere Ecke des umgebenden Blocks. Um zusammengehörige Objekte gemeinsam zu positionieren, verwendet man sogenannte div-Bereiche, die eine Box darstellen und auch beliebig verschachtelt werden können.

Beispiel

Es sind nun insgesamt 5 Angaben nötig um einen div-Bereich zu definieren:

Einfaches Beispiel mit zwei verschachtelten Bockelementen:

Aufgabe

Kopiere folgenden Code und öffne den Editor. Markiere den Text im linken oberen Bereich und kopiere den Quelltext unserer Seite dort hinein.

HTML-Code
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Unbekannte Seite</title>
  6.  
  7. </head>
  8.  
  9. <body>
  10. <div id="nav"></div>
  11. <div id="inhalt">
  12. <h1>Schöner Bayerischer Wald</h1>
  13. <p id="absatz1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec nisl sit amet odio vehicula sagittis. Suspendisse eget tempus sem. Sed non enim ac sem facilisis eleifend. Nunc tristique elit orci. Maecenas venenatis lectus nec purus pellentesque auctor. Nulla sit amet ante orci. Donec malesuada risus quis purus hendrerit ac ultricies massa eleifend. Aliquam sed nisi leo. Nullam sem erat, bibendum sed tempus eget, tempor ut arcu. Aliquam sollicitudin, est ac congue ullamcorper, justo turpis egestas sem, vel pellentesque magna ligula ut mauris. </p>
  14.  
  15. <p>Sed mauris ipsum, dictum ac iaculis sit amet, dictum sed massa. Fusce lectus arcu, dictum ac facilisis et, rhoncus a ipsum. Cras massa massa, rutrum eu mollis a, ultricies vitae felis. Suspendisse at leo ut quam interdum pellentesque. Curabitur a interdum justo. Pellentesque purus velit, congue eu viverra quis, congue vel tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce eleifend risus at arcu faucibus ullamcorper commodo sapien sodales. Phasellus tempus consequat est quis tempus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu felis ante. Etiam suscipit est vel urna scelerisque auctor. Aliquam erat volutpat. Aliquam erat volutpat. Vestibulum non enim sed elit egestas sollicitudin suscipit id nibh. Aliquam viverra congue ipsum eu gravida. Nullam porttitor vestibulum commodo.</p>
  16. </div>
  17. </body>
  18. </html>
  19.  

Kopiere anschließend die Grundstruktur des Stylesheets und kopiere sie in das linke untere Feld des Editors. Nimm nun folgende Formatierungen vor:

CSS - Struktur
  1. body {
  2.  
  3. }
  4.  
  5. #nav {
  6.  
  7. }
  8.  
  9. #inhalt {
  10.  
  11.  
  12. }
  13.  
  14. #absatz1 {
  15.  
  16. }
  17.  
  18. h1 {
  19.  
  20. }
  21.  
  22. p {
  23.  
  24. }

Über "Tools - Download - Download this weave as a single HTML file" kann das Ergebnis lokal gespeichert werden.